<template>
  <form-field :label="label" :labelWidth="labelWidth" class="range">
    <input class="form-control" :value="minDate" @click="onShowPicker('min')" readonly />
    <b>~</b>
    <input class="form-control" :value="maxDate" @click="onShowPicker('max')" readonly />
  </form-field>
  <van-popup v-model:show="showPicker" position="bottom">
    <van-datetime-picker v-model="currentDate" type="date" @confirm="onConfirm" @cancel="showPicker=false" />
  </van-popup>
</template>
<script>
import { DatetimePicker, Popup } from 'vant';
export default {
  components: {
    'van-popup': Popup,
    'van-datetime-picker': DatetimePicker,
  },
  props: {
    label: String,
    labelWidth: {
      type: Number,
      default: 6,
    },
    minDate: String,
    maxDate: String
  },
  emits: ['update:minDate', 'update:maxDate'],
  data() {
    return {
      showPicker: false,
      dateType: '',
      currentDate: new Date()
    };
  },
  methods: {
    onShowPicker(type) {
      this.dateType = type;
      this.showPicker = true;

      switch (type) {
        case 'min':
          this.currentDate = this.minDate ? new Date(this.minDate) : this.currentDate;

          break;

        case 'max':
          this.currentDate = this.maxDate ? new Date(this.maxDate) : this.currentDate;

          break;
      }
    },
    onConfirm(date) {
      switch (this.dateType) {
        case 'min':
          this.$emit('update:minDate', this.dateFormat(date));

          break;

        case 'max':
          this.$emit('update:maxDate', this.dateFormat(date));

          break;
      }

      this.showPicker = false;
    }
  }
};
</script>